<style src='../../css/common.css' ></style>
<template>
  <div class="batconfirm">
    <!-- 头部导航 -->
    	<div class="status-bar" v-if="ifStatusBarExist"></div>
		<wxc-minibar title="投注确定">
			<!-- <div class="header-all" slot="left" @click="goBack()">
				<image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png" style="height:28px;width:16px;"></image>
			</div>
			<div class="header-con" slot="middle">
				<text class="header-title">投注确定</text>
			</div> -->
			<div class="header-font-title" slot="right" @click="payMent('chip')">
				<text class="header-font-pr">发起合买</text>
			</div>
		</wxc-minibar>
		<!-- 头部导航end -->
		<div class="middlecontent" :style="ifStatusBarExistForContent">
			<!-- 选号操作按钮 -->
			<div class="option">
				<div class="option_fl" @click="goSelectMark()">
					<image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete.png" class="option-icon-btn" style="margin-right:16px;"></image>
					<text class="option-text-btn">继续选号</text>
				</div>
				<div class="option_fr"  @click="randowfive()">
				<image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete.png" class="option-icon-btn" style="margin-right:16px;"></image>
					<text class="option-text-btn">机选5注</text>
				</div>
			</div>
			<!-- 选号操作按钮 -->
			<div class="batlist">
				<div class="batlist-line"></div>
				<div class="scroller-box">
					<scroller class="scroller">
						<div class="batlist_item" v-for="(item, index) in markList" :key="`item${index}`">
							<!-- 每列删除球的操作按钮-->
							<div class="batlist_item_icon">
								<image class="batlist_item_icon_delete" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delete_1.png" @click="deleteMarkList(index)"></image>
							</div>
							<!-- 每列删除球的操作按钮end-->
							<!-- 每列球数据 -->
							<pai-three-ball :columnData="item"></pai-three-ball>
							<!-- 每列球数据end -->
						</div>
					</scroller>
					<!-- 齿轮图片 -->
					<div class="batlist-gear">
						<image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/gear-icon.png" style="width:686px;height:24px;"></image>
					</div>
				</div>
				
			</div>  
			<div class="protocol">
				<!-- 协议是否同意 -->
				<div class="protocol_fl" @click="afterVoting('checked')">
					<div class="protocol_fl_check" v-if="!checked" style="width:40px;height:40px;border-radius:50%;background-color:white;"></div>
					<image class="protocol_fl_checkd" v-if="checked" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png"></image>
				</div>
				<div class="protocol_fl" style="margin-left:16px">
					<text style="font-size: 24px;color: #999999;">我已年满18周岁，已阅读并同意</text><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #151515;">《购彩代购协议》</text>
				</div>
				<!-- 协议是否同意end -->
			</div>
			<div class="stepoption">
				<!-- 投的期数 -->
				<div class="stepoption_fl">
					<text class='gray-font'>投</text>
					<div class="stepoption-ct">
						<div class="stepoption-minus" style="border-right-width:0px;" @click="calcalate('left', 'periods')">
							<text style="font-size:50px;">-</text>
						</div>
							<text class="stepoption-input" @change="changeFn('periods')">{{periods}}</text>
						<!-- <input class="stepoption-input" type="number" v-model="periods" max="100" min="1" disabled @change="changeFn('periods')"> -->
						<div class="stepoption-minus" style="border-left-width:0px;" @click="calcalate('rigt', 'periods')">
							<text style="font-size:50px;">+</text>
						</div>
					</div>
					<text class='gray-font'>期</text>
				</div>
			<!-- 投的期数end -->
			<!-- 投的倍数 -->
				<div class="stepoption_rg">
					<text class='gray-font'>投</text>
					<div class="stepoption-ct">
						<div class="stepoption-minus" style="border-right-width:0px;" @click="calcalate('left', 'multiple')">
							<text style="font-size:50px;">-</text>
						</div>
						<text class="stepoption-input" disabled @change="changeFn('multiple')">{{multiple}}</text>
						<!-- <input class="stepoption-input" type="text" v-model="multiple" max="100" min="1" disabled @change="changeFn('multiple')" > -->
						<div class="stepoption-minus" style="border-left-width:0px;" @click="calcalate('right', 'multiple')">
							<text style="font-size:50px;">+</text>
						</div>
					</div>
					<text class='gray-font'>倍</text>
				</div>
				<!-- 投的倍数end-->
			</div>
  		</div>

		<div class="fixedbottom">
			<div class="fixedbottom_fl" @click="afterVoting('checked1')" v-if="this.lottoType === 'super-lotto'">
				<div class="" v-if="!checked1" style="width:40px;height:40px;border-radius:20px; background-color:rgba(0,0,0,0.1);"></div>
				<image class="" v-if="checked1" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png"></image>
				<text style="font-size:24px; color:#333; margin-left:8px;">追加投注</text>
			</div>
			<!-- 投注总期数倍数金额 -->
			<div class="fixedbottom_rg">
				<div style="margin-right:32px; flex:1; display:flex; align-items: flex-end;">
					<div style="display:flex;justify-content:flex-end;align-items:flex-end;">
						<text style="font-family: PingFangSC-Medium;font-size:24px; color: #E70D0D;">{{totalPram.money}}元</text>
					</div>
					<div style="display:flex;flex-direction: row;align-items:center;">
						<text style="font-size: 20px;color:#B2B2B2;">{{totalPram.number}}注{{multiple}}倍{{periods}}期</text>
					</div>
				</div>
				<div class="buttons">
					<wxc-button text="付款"  :disabled="btnDisabled" :btnStyle="btnStyle" @wxcButtonClicked="payMent('pay')"></wxc-button>
				</div>
			</div>
			<!-- 投注总期数倍数金额end-->
		</div>
		  <loading-big v-if="loadingshow"></loading-big>
		<!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
		</wxc-loadingsp> -->
  </div>
  <!-- </div> -->
</template>

<script>
import { WxcButton, WxcStepper, Utils, WxcDialog } from "weex-ui"
import paiThreeBall from "@/components/lotteries/confirm/paiThreeBall.vue"
import { postResponsesToken } from "@/api.js"
import WxcLoadingsp from "../../components/modules/loading";
import loadingBig from "@/components/modules/loading-big";
import { serialize, getBaseUrl, jsonAnalysis } from "@/utils/index.js";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { recentBuyGroup } from "@/js/global/index_data.js"
// 测试数据

const navigator = weex.requireModule("navigator")
const storage = weex.requireModule("storage")
const modal = weex.requireModule("modal")
const sxglobalEvent = weex.requireModule("globalEvent");

export default {
	components: {
		WxcLoadingsp,
		WxcMinibar,
		WxcButton,
		paiThreeBall,
		loadingBig
	},
	data() {
		return {
			btnStyle: {
				backgroundColor: "#e70d0d",
				width: "158px",
				height: "100px",
				borderRadius: '0px'
			},
			// 提交订单信息
			postParam:{
				issueIssue: "",
				lotteryId:"",
				buyTogether:0,
				issueSum:"",
				multiple:"",
				money:"",
				betContent:"",
				isChase:1,
				schemeNumberUnit:'', //注数
				
			},
			loadingshow: false,
			markList: [],
			reqMarklist: [],
			periods: 1,
			multiple: 1,
			checked1: false,
			checked: true,
			from: "",
			lottoType: "",
		}
	},
	watch: {
		periods() {
			this.periods = this.astrictNumber("periods");
		},
		multiple() {
			this.multiple = this.astrictNumber("multiple");
		}
	},
	computed: {
		btnDisabled() {
			return !(this.markList.length > 0 && this.checked === true)
		},
		
		ifStatusBarExistForContent() {
			return {
				top : weex.config.env.platform === "iOS" ? '124px' : '84px'
			}
		},
		
		ifStatusBarExist() {
			return  weex.config.env.platform === "iOS"
		},

		totalPram() {
			if (this.markList.length <= 0 || !Array.isArray(this.markList)) {
				return {
					number: 0,
					money: 0
				}
			}
			let param = {
				number: 0,
				money: 0
			};
			this.markList.forEach((item, index, arr) => {
				param["number"] += Number(item["number"]);
				param["money"] += Number(item["money"]);
			});
			return {
				// number: param.number * this.periods, 
				number: param.number,
				money: param.money * this.periods * this.multiple 
			}
		}
	},
	methods: {
		onClickLeftc() {
			return new Promise((resolve, reject) => {
				modal.confirm({
					message: "退出将清空所选投注号码",
					okTitle: "确定",
					cancelTitle: "取消",
					duration: 0.3
				},(value)=>{ resolve(value) })
			})
		},

		// 返回选号操作
		goSelectMark() {
			navigator.pop();
		},

		// 
		goBack() {
			navigator.pop();
		},

		// 跳转支付链接
		linkRoter(order) {

			let awardName = {
				'3': '福彩3D',
				'4': '排三',
				'5': '排五'
			}

			let baseurl = getBaseUrl(weex.config.bundleUrl, true)
			
			
			// let hash = {
			// 	order: order,
			// 	totalmoney: this.totalPram.money,
			// 	lottotype: awardName[this.postParam['lotteryId']] + this.postParam.issueIssue + "期",
			// 	lottoId: this.postParam['lotteryId']
			// }
		
			let hash = Object.assign(this.postParam, {
					totalmoney: this.totalPram.money,
					lottotype: awardName[this.postParam['lotteryId']] + this.postParam.issueIssue + "期",
					lottoId: this.postParam['lotteryId']
				})

			navigator.push({
				url:baseurl + `views/pay/pay.js?`+ serialize(hash),
				animated: "true"
			})
		},

		// 跳转支付
		async payMent(clickType) {

			if( !this.checked ) return modal.toast({ message: '请勾选代购协议' });
			
			let StringArr = this.markList.map((v)=>{
				for(let i in v) {
					v[i] = Array.isArray(v[i]) ? v[i].map(String) : v[i]
				}
				return v
			})

			this.postParam = Object.assign(this.postParam, {
				schemeNumberUnit: this.totalPram.number,
				issueSum: this.periods,
				multiple: this.multiple,
				money: this.totalPram.money,
				betContent: JSON.stringify(StringArr)
			})

			
			// 转换lotteryNo
			this.postParam['lotteryNo'] = recentBuyGroup[ Number(this.postParam['lotteryId']) -1 ].typeName

			delete this.postParam['issueId']
			


			if (clickType === "chip") {
				let baseurl = getBaseUrl(weex.config.bundleUrl, true);
				
				this.loadingshow = false;

				navigator.push({
					url: baseurl + `views/guess/chipStart.js?` + serialize(this.postParam),
					animated: "true"
				})

				return;
			}

			
			
			this.linkRoter()

			// let data = await postResponsesToken('order/bet/bet', this.postParam).catch(e=> modal.toast({message:e}))

			
			// if( data.code === 0) {
			// 	this.linkRoter(data.data)
			// } else {
			// 	modal.confirm({
			// 		message:data.msg
			// 	})
			// }
		},

		afterVoting(param) {
			this[param] = !this[param];
		},

		// 修改期数倍数的条件限制
		changeFn(param) {
			this[param] = this.astrictNumber(param);
		},
		// 限制倍数和期数值
		astrictNumber(param) {
			if (this[param] <= 1) {
				this[param] = 1;
			}

			if (this[param] >= 100) {
				this[param] = 100;
			}

			return this[param];
		},

		//获取机选5住
		async randowfive() {
			let iarr = []
			let param = {
				name : this.postParam.lotteryId != 5 ? 'paiThreeFn' : 'paiFiveFn',
				len : this.postParam.lotteryId != 5 ? 3 : 5
			}

			for (let i = 0; i < 5; i++) {
				let curDate = this.createRandowArr(0,9, param.len)
				iarr.push(this[param.name](curDate))
			}

			this.markList = this.markList.concat(iarr)

			// 存储数据
			let setitem = await this.cacheMark(true);

			
		},

		// 排三随机注
		paiThreeFn(data) {
			return {
				"hundred": [data[0]],
				"ten": [data[1]],
				"ge": [data[2]],
				"numberType": '1',
				"type": "multiple",
				"money": 2,
				"number": 1
			}
		},
		
		// 排五随机注
		paiFiveFn(data) {
			return {
				'wan'     : [data[0]],
				'thousand': [data[1]],
				"hundred": [data[2]],
				"ten": [data[3]],
				"ge": [data[4]],
				"numberType":"5",
				"type": "multiple",
				"money": 2,
				"number": 1
			}
		},

		// 删除指定的一组数据
		async deleteMarkList(index) {
			this.markList.splice(index, 1);
			// 存储数据
			let setitem = await this.cacheMark(true);
		},

		// 随机数
		createRandowArr(min, max, length) {
			let r = [],
				o = {},
				a;
			for (var i = 0; i < length; i++) {
				a = Math.floor(min + max * Math.random());	
				o[a] ? i-- : (r.push(a), (o[a] = true));
			}
			return r.sort((a, b) => (a < b ? -1 : 1));
		},


		calcalate(type, parm) {
			this[parm] = type === "left" ? --this[parm] : ++this[parm];
		},

		//缓存数据
		cacheMark(state) {
			return new Promise((resolve, rejects) => {
				storage.setItem("paiThreeList", JSON.stringify(this.markList), event => {
					if (event.result === "success" && event.data != '') {
						resolve(true);
					} else {
						rejects("缓存数据失败");
					}
				})
			})
		},

		// 获取缓存数据
		getCacheMark() {
			return new Promise((resolve, rejects) => {
				storage.getItem("paiThreeList", event => {
					if (event.result === "success") {
						resolve(event)
					} else {
						modal.toast({message: "缓存数据失败"})
					}
				});
			});
		},

		// 删除缓存
		removeCacheMark() {
			return new Promise((resolve, rejects) => {
				this.getMarkAllKeys().then(value => {
				if (value.indexOf("paiThreeList") === -1) {
					resolve(true);
					return false;
				} else {
					storage.removeItem("paiThreeList", event => {
					if (event.result === "success") {
						resolve("删除成功");
					} else {
						rejects("删除缓存数据失败!");
					}
					});
				}
				});
			});
		},

		getUrlParam() {
			this.getCacheMark().then((value) => {
				this.markList = JSON.parse(value.data)
			})
		}
	},
	destroyed() {
		// sxglobalEvent.removeEventListener("androidback");
	},

	mounted() {
		let getParam = jsonAnalysis(weex.config.bundleUrl.split('?')[1])
		
		
		this.postParam =  Object.assign(this.postParam, getParam)

		
	
		this.getUrlParam()
	}
};
</script>

<style scoped>
  .header-all {
    flex: 1;
    height: 90px;
    display: flex;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
  }
  .batconfirm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(245, 245, 245);
  }
  .fixedbottom {
    position: absolute;
    bottom: 0;
    width: 750px;
    height: 100px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .middlecontent {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 100px;
    width: 750px;
    background-color: rgb(245, 245, 245);
  }
  .fixedbottom_fl {
    margin-left: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
  }
  .fixedbottom_rg {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex: 1;
  }
  .buttons {
    background-color: #e70d0d;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .option {
    display: flex;
    margin-top: 25px;
    flex-direction: row;
    justify-content: space-between;
  }
  .option_fl {
    margin-left: 32px;
    width: 320px;
    height: 74px;
    background-color: #ffffff;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
  }
  .option_fr {
    margin-right: 32px;
    width: 320px;
    height: 74px;
    background-color: #ffffff;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
  }
  .batlist {
    margin-top: 25px;
    margin-bottom: 15px;
    justify-content: center;
    width: 750px;
    display: flex;
    height: 700px;
    position: relative;
    align-items: center;
  }
  .dannumberred {
    font-size: 20px;
    color: red;
  }
  .dannumberblue {
    font-size: 20px;
    color: blue;
  }
  .batlist_item {
    display: flex;
    padding-top: 32px;
    flex-direction: row;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #e1e1e1;
    padding-bottom: 24px;
    align-items: center;
  }

  .batlist_item_desc {
    margin-left: 12px;
    display: flex;
    flex-direction: row;
  }
  .numberdetail {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: red;
  }
  .dannumber {
    position: absolute;
    top: 0;
    right: 0px;
  }
  .red {
    background-color: red;
  }
  .bluess {
    background-color: blue;
  }
  .batlist_item_icon {
    display: flex;
    justify-content: center;
    margin-left: 28px;
    margin-right: 38px;
  }
  .batlist_item_icon_delete {
    width: 40px;
    height: 40px;
  }
  .stepoption {
    width: 750px;
    left: 0;
    height: 73px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .stepoption_fl {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 32px;
    height: 73px;
  }
  .stepoption_rg {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 32px;
  }
  .protocol {
    width: 750px;
    height: 40px;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
  .protocol_fl {
    margin-left: 32px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
  .weex-elstepper-input {
    background-color: white;
  }
  .header {
    width: 750px;
    height: 90px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
  }
  .header-title {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    font-family: PingFangSC-Medium;
  }
  .header-font-title {
    height: 90px;
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-font-pr {
    font-size: 28px;
    color: #fff;
  }
  .flex {
    display: flex;
  }
  .header-con {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .batlist-line {
    width: 710px;
    height: 12px;
    background-color: #c7c7c7;
    border-radius: 6px;
    position: absolute;
    left: 20px;
    top: 0px;
    z-index: 1;
  }
  .scroller-box {
    background-color: white;
    position: relative;
    left: 0;
    top: -7px;
    z-index: 3;
  }

  .scroller {
    width: 686px;
    height: 640px;
  }

  .option-icon-btn {
    width: 28px;
    height: 28px;
    margin-right: 16px;
  }
  .option-text-btn {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
  }
  .white-color {
    color: #fff;
    font-size: 28px;
  }
  .stepoption-minus {
    width: 70px;
    height: 74px;
    background-color: #f8f8f8;
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
  }
  .stepper-plus {
    width: 70px;
    height: 74px;
    background-color: #f8f8f8;
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
  }
  .stepoption-input {
    width: 106px;
    height: 74px;
    line-height: 74px;
    background-color: #fff;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    text-align: center;
  }
  .stepoption-ct {
    width: 247px;
    height: 78px;
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .gray-font {
    color: #333;
    font-size: 24px;
  }
  .parint {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

 .batlist-gear{
    width: 686px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: -24px;
    left: 0;
    z-index: -1;
}



</style>